<template>
  <div class="test">
    <audio controls ref="audio" class="aud" v-show="false">
      <source src="../../../../public/mp3/NO.mp3"/>
    </audio>
    <audio controls ref="audioT" class="aud" v-show="false">
      <source src="../../../../public/mp3/OK.mp3"/>
    </audio>
    <div class="cont">
      <div class="cont-left">
        <div class="BasicInformation">
          <div class="title">
            基本信息
          </div>
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="工 单 I D ：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.fMoId"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工单编号：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.fMocCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品品号：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.fInvCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计产量：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.fQty"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品品名：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.fInvName"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品规格：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.fInvStd"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="规格描述：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.fInvRemark"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-checkbox label="播放声音" size="large"/>
              </el-col>
              <hr style="width: 100%;margin-bottom: 1rem;">
              <el-col :span="14">
                <el-form-item label="报工工序：">
                  <el-input disabled v-model="from.data.wpCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item>
                  <el-input disabled v-model="from.data.wpName"/>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label=" 操 作 员 ：">
                  <el-input disabled v-model="from.data.userCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item>
                  <el-input disabled v-model="from.data.userName"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="产品编号：" prop="fOrgCategory">
                  <el-input disabled v-model="from.data.barCode"/>
                </el-form-item>
              </el-col>
              <el-col :span='4'>
                <el-button type="danger" plain @click="clearData">初始化数据</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="Scanning">
          <div class="title">
            当前扫描
          </div>
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-table :data="tableData.sm" border style="width: 100%">
                  <el-table-column prop="fcbSysBarCode" label="产品编号" :show-overflow-tooltip="true"/>
                  <el-table-column prop="fInvCode" label="产品品号" :show-overflow-tooltip="true"/>
                  <el-table-column prop="fQty" label="预计产量"/>
                  <el-table-column prop="fInvName" label="品名" :show-overflow-tooltip="true"/>
                  <el-table-column prop="fInvStd" label="规格" :show-overflow-tooltip="true"/>
                  <el-table-column prop="remark" label="原因" :show-overflow-tooltip="true"/>
                  <el-table-column align="center" label="良品/不良品" #default="scope" width="120">
                    <el-result icon="success" v-if="!scope.row.scan"></el-result>
                    <el-result icon="error" v-else></el-result>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="cont-rit">
        <div class="ScanningInf">
          <div class="title">
            扫描信息
          </div>
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item>
                  <el-input class="textar" :class="(SMinfShow.type!=-1)?'suc':'err'" type="textarea" disabled
                            :placeholder="SMinfShow.text"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="扫描信息：" prop="fOrgName">
                  <el-input
                      autofocus
                      v-model="from.sm"
                      @keyup.enter="getInf"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="Progress">
          <div class="title">
            加工进度
          </div>
          <div class="info">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="良品/不良品：" prop="fOrgName">
                  <el-switch
                      class="mb-2"
                      v-model="testData.swi"
                      active-text="不良品"
                      inactive-text="良品"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="责任部门：" prop="fOrgName">
                  <el-input v-model="from.data.fResponsibleDepartment" placeholder="" style="width:220px;" size="normal"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="责任人：" prop="fOrgName" label-width="85px">
                  <el-input v-model="from.data.fPeopleInCharge" placeholder="" style="width:220px;" size="normal"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="互检人：" prop="fOrgName" label-width="85px">
                  <el-input v-model="from.data.fPeopleInMutualInspection" placeholder="" style="width:220px;"
                            size="normal" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="PCQ检验：" prop="fOrgName">
                  <el-select v-model="from.data.fPCQInspection" style="width:220px;" clearable filterable>
                    <el-option v-for="item in selectList.PQC"
                               :key="item"
                               :label="item"
                               :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="问题分类：" prop="fOrgName">
                  <el-select v-model="from.data.fQuestionClassification" clearable filterable style="width: 220px;">
                    <el-option v-for="item in selectList.wtfl"
                               :key="item"
                               :label="item"
                               :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设备编号：" prop="fOrgName">
                  <el-select v-model="from.data.fEquipmentNumber" clearable filterable style="width:220px;"
                             @change="changeFOrgName">
                    <el-option v-for="item in selectList.sbbh"
                               :key="item"
                               :label="item"
                               :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="不良原因：" prop="fOrgName">
                  <el-input
                      v-model="from.data.fReason"
                  >
                    <template #prepend>
                      <el-select v-model="from.data.fReason" style="width: 115px" placeholder="请选择">
                        <el-option :label="item" :value="item" :key="item" v-for="item,index in selectList.blyy"/>
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="处理方案：" prop="fOrgName">
                  <el-select placeholder="请选择处理方案" style="width: 100%" filterable
                             v-model="from.data.fHandlingMethod">
                    <el-option v-for="item in selectList.clfa" :key="item" :label="item"
                               :value="item"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="处理人：" prop="fOrgName">
                  <el-input v-model="from.data.fHandler" placeholder="" style="width:220px;" size="normal"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QC确认人：" prop="fOrgName">
                  <el-input v-model="from.data.fQCConfirmor" placeholder="" style="width:220px;" size="normal"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="处理情况：" prop="fOrgName">
                  <el-input
                      v-model="from.data.fHandlingInformation"
                  >
                    <template #prepend>
                      <el-select v-model="from.data.fHandlingInformation" style="width: 115px" placeholder="请选择">
                        <el-option :label="item" :value="item" :key="item" v-for="item,index in selectList.clqk"/>
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="85px" label="不良现象：" prop="fOrgName">
                  <el-input
                      type="textarea"
                      v-model.trim="from.data.remark"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="18"></el-col>
              <el-col :span='3'>
                <el-button type="warning" plain @click="clear">清空</el-button>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" plain @click="bg">提交</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footName">

  </div>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted, reactive} from "vue"
import ajax from '../../../../public/JavaScript/api/ajax.js'
import {ElMessage, ElMessageBox} from 'element-plus'

let testData = reactive({
  swi: false,
  isB: false
})
let tableData = reactive({
  sm: []
})
let from = reactive({
  sm: '',
  data: {
    "barCode": "",
    "invCode": "",
    "scan": "",
    "userCode": "",
    "userName": "",
    "wpCode": "",
    "wpName": "",
    "remark": '',
    "fEquipmentNumber": "", //设备编号
    "fGoodOrNot": 0, //是否良品
    "fHandler": "", //处理人
    "fHandlingInformation": "", //处理情况
    "fHandlingMethod": "", //处理方案
    "fPCQInspection": "", //PCQ检验
    "fPeopleInCharge": "", //责任人
    "fPeopleInMutualInspection": "", //互检人
    "fQCConfirmor": "", //QC确认人
    "fQuestionClassification": "", //问题分类
    "fReason": "", //不良原因
    "fResponsibleDepartment": "", //责任部门
  }
})
let selectList = reactive({
  clfa: [],
  wtfl: [],
  sbbh: [],
  blyy: [],
  clqk: [],
  PQC: []
})
let SMinfShow = reactive({
  text: '提示信息',
  type: -1
})
let refd = ''

function getInf() {
  if (from.sm == "00") {
    if (from.data.barCode && from.data.userCode && from.data.wpCode) {
      ajax.post('/pqc/submit', {
        body: {
          ...(from.data),
          "businessType": 2,
          scan: '00'
        }
      }, res => {
        console.log(res)
        if (res.code == 200) {
          SMinfShow.text = res.data.scanMsg
          SMinfShow.type = res.data.scanCode
          tableData.sm.push({
            ...(res.data.data),
            scan: testData.swi,
            remark: from.data.remark
          })
          // clearAll()
          from.data.barCode = ''
          from.data.remark = ''
          testData.swi = false
        } else {
          ElMessage.error(res.msg)
          SMinfShow.text = res.data.scanMsg
          SMinfShow.type = res.data.scanCode
        }
      })
    } else {
      ElMessage.error('参数缺失，请检查产品编号、报工工序、操作员字段是否为空')
    }
  } else {
    ajax.post('/pqc/sinfo', {
      body: {
        "barCode": from.data.barCode,
        "businessType": 2,
        "invCode": from.data.invCode,
        "scan": from.sm,
        "userCode": from.data.userCode,
        "userName": from.data.userName,
        "wpCode": from.data.wpCode,
        "wpName": from.data.wpName,
        "remark": from.data.remark
      }
    }, res => {
      console.log(res)
      if (res.code == 200) {
        SMinfShow.text = res.data.scanMsg || '啥也没有'
        SMinfShow.type = res.data.scanCode || 0
        from.data = {
          ...(from.data),
          ...(res.data.data?.mocoRdersDisplayVo || from.data)
        }
        from.data.barCode = res.data.data?.barCode || from.data.barCode
        if (res.data.scanCode == 3) {
          from.data.userName = res.data.data.name || from.data.userName
          from.data.userCode = res.data.data.code || from.data.userCode
          // from.data.fPCQInspection=res.data.data.name || from.data.userName
          localStorage.setItem('testu', JSON.stringify({
            userName: res.data.data.name || from.data.userName,
            userCode: res.data.data.code || from.data.userCode
          }))

        } else if (res.data.scanCode == 2) {
          from.data.wpCode = res.data.data.code || from.data.wpCode
          from.data.wpName = res.data.data.name || from.data.wpName
          localStorage.setItem('testw', JSON.stringify({
            wpName: res.data.data.name || from.data.wpName,
            wpCode: res.data.data.code || from.data.wpCode
          }))
        }
        from.sm = ''
      } else {
        ElMessage.error(res.msg)
        SMinfShow.text = res.msg
        SMinfShow.type = 0
      }
    }, err => {
      console.log(err)
    })
  }
}

/* 清空不良原因 */
function clear() {
  testData.swi = false
  from.data.remark = ''
}

/* 清空整页信息 */
function clearAll() {
  clearObj(from.data)
  from.sm = ''
  testData.swi = false
}

/* 对象赋空 */
function clearObj(obj) {
  for (let i in obj) {
    obj[i] = ''
  }
}

function clearData() {
  ElMessageBox.confirm(
      '是否重置当前信息?',
      '警告',
      {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'error',
      }
  )
      .then(() => {
        clearAll()
        ElMessage({
          type: 'success',
          message: '重置成功!',
        })
      })
}

function sendBg() {
  ajax.post('/pqc/submit', {
    body: {
      ...(from.data),
      "businessType": 2,
      scan: (testData.swi) ? '01' : '00'
    }
  }, res => {
    console.log(res)
    if (res.code == 200) {
      SMinfShow.text = res.data.scanMsg
      SMinfShow.type = res.data.scanCode
      tableData.sm.push({
        ...(res.data.data),
        scan: testData.swi,
        remark: from.data.remark
      })
      // clearAll()
      from.data.barCode = ''
      from.data.remark = ''
      testData.swi = false
    } else {
      ElMessage.error(res.msg)
      SMinfShow.text = res.data.scanMsg
      SMinfShow.type = res.data.scanCode
    }
  })
}

/* 报工 */
function bg() {
  console.log(testData.swi)
  if (from.data.barCode && from.data.userCode && from.data.wpCode) {
    sendBg()
  } else {
    ElMessage.error('参数缺失，请检查产品编号、报工工序、操作员字段是否为空')
  }
}

onMounted(() => {
  let user = JSON.parse(localStorage.getItem('testu'))
  let wp = JSON.parse(localStorage.getItem('testw'))
  let code = JSON.parse(localStorage.getItem('testFOrgName'))
  if (user) {
    from.data.userName = user.userName
    from.data.userCode = user.userCode
    // from.data.fPCQInspection=user.userName
  }
  if (wp) {
    from.data.wpCode = wp.wpCode
    from.data.wpName = wp.wpName
  }
  if (code) {
    from.data.fEquipmentNumber = code.code
  }
  refd = getCurrentInstance()
  ajax.post('/common/dict?name=处理方案', {}, res => {
    if (res.code == 200) {
      selectList.clfa = res.data
    } else {
      ElMessage.error('服务器异常')
    }
  })
  ajax.post('/common/dict?name=问题分类', {}, res => {
    if (res.code == 200) {
      selectList.wtfl = res.data
    } else {
      ElMessage.error('服务器异常')
    }
  })
  ajax.post('/common/dict?name=设备编号', {}, res => {
    if (res.code == 200) {
      selectList.sbbh = res.data
    } else {
      ElMessage.error('服务器异常')
    }
  })
  ajax.post('/common/dict?name=不良原因', {}, res => {
    if (res.code == 200) {
      selectList.blyy = res.data
    } else {
      ElMessage.error('服务器异常')
    }
  })
  ajax.post('/common/dict?name=处理情况', {}, res => {
    if (res.code == 200) {
      selectList.clqk = res.data
    } else {
      ElMessage.error('服务器异常')
    }
  })
  ajax.post('/common/dict?name=PQC检验', {}, res => {
    if (res.code == 200) {
      selectList.PQC = res.data
    } else {
      ElMessage.error('服务器异常')
    }
  })
})

function test() {
  refd.ctx.$refs.audioT.play();//play()
}

function changeFOrgName(ev) {
  localStorage.setItem('testFOrgName', JSON.stringify({
    code: ev
  }))
}
</script>

<style lang="less" scoped>
@import url("./test.less");
</style>